<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<title>修理</title>
		<!--标准mui.css-->
		<link rel="stylesheet" href="../css/mui.min.css">
		<link rel="stylesheet" href="../css/mui.picker.min.css">
		<script src="../js/mui.min.js"></script>
		<script src="../js/jquery.min.js"></script>
		<script src="../js/mui.picker.min.js"></script>

	</head>
	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">申请维修</h1>
		</header>
		<div class="mui-content" style="text-align: center;">
			<img src="../image/photo.png" onclick="openCamera()">
			<div class="mui-row">
				<button style="width:100%" id="btn_type">类别</button>
			</div>
			<br>
			<textarea placeholder="输入故障描述, 包括具体地点、具体的信息等" id="text"></textarea>
			<button type="button" class="mui-btn mui-btn-primary" style="width:98%">提交</button>
		</div>
	</body>


	<script type="text/javascript">
		var file_url;
		var timestamp;
		var dataBase64;
		mui.init();
		var cmr;
		mui.plusReady(function() {
			cmr = plus.camera.getCamera();
		});

		//打开手机摄像头
		function openCamera() {
			cmr.captureImage(function(p) {
				plus.io.resolveLocalFileSystemURL(p, function(entry) {
					plus.nativeUI.showWaiting("正在上传", ""); //显示系统loading框
					plus.zip.compressImage({
						src: entry.toLocalURL(),
						dst: '_doc/camera/' + p,
						overwrite: true,
						format: "jpg",
						width: "30%"
					}, function(zip) {
						if (zip.size > (1 * 1024 * 1024)) {
							mui.toast('文件超大,请调整相机重新拍照');
							return;
						}
						file_url = zip.target;
						//转为base64
						getBase64(file_url);
						//uploadToServer(file_url);
					}, function(zipe) {
						plus.nativeUI.closeWaiting();
						mui.toast('压缩失败！')
					});
				}, function(e) {
					plus.nativeUI.closeWaiting(); //获取图片失败,loading框取消
					mui.toast('失败：' + e.message); //打印失败原因,或给出错误提示
				});
			}, function(e) {
				plus.nativeUI.closeWaiting(); //开启照相机失败,关闭loading框
				mui.toast('失败：' + e.message); //打印错误原因,给出错提示
			}, {
				filename: '_doc/camera/', //图片名字
				index: 1 //摄像头id
			});
		}


		//上传
		function uploadToServer(file_url) {
			var url = ITFC_ADDR.JP_FACEVERIFY;
			var task = plus.uploader.createUpload(url, {
				method: "POST",
				priority: 100
			}, function(t, status) {
				plus.nativeUI.closeWaiting();
				//                  mui.toast("t="+JSON.stringify(t));
				if (status == 200) {
					mui.toast('上传成功');
					/*var msg = JSON.parse(task.responseText);
					if (msg.message.code == '00') {
						mui.toast(msg.message.message);
						console.log(msg.message.message);
						postImg();
					} else { //验证失败
						mui.toast(msg.message.errorMessage);
					}*/
				} else {
					console.log(':上传失败');
					mui.toast("上传失败: " + status);
				}
			});
			task.addFile(file_url, {
				key: 'faceImg'
			});
			/*task.addEventListener("statechanged",function(upload, status ){
			    mui.toast(upload+"==="+ status );
			},false);*/
			task.start();
		}

		//获取base64方法
		function getBase64(url) { //传入图片路径
			function getBase64Image(img, width, height) {
				var canvas = document.createElement("canvas");
				canvas.width = width ? width : img.width;
				canvas.height = height ? height : img.height;
				var ctx = canvas.getContext("2d");
				ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
				dataBase64 = canvas.toDataURL("image/jpg");
				postImg(dataBase64.substr(22)); //dataBase64上传到后台
			}
			var image = new Image();
			image.οnlοad = function() { //onload事件不执行，后查是因为onloand事件是基于http协议的，file://。。.jpg路径没法执行，弃之 
				// mui.toast("load2");
				getBase64Image(image);
			};
			image.src = url;
		}

		var picker = new mui.PopPicker();
		var ttt;
		picker.setData([{
				value: "1",
				text: "类别1"
			},
			{
				value: "2",
				text: "类别2"
			},
			{
				value: "3",
				text: "类别3"
			},
			{
				value: "4",
				text: "类别4"
			},
			{
				value: "5",
				text: "类别5"
			}
		]);

		var btn = document.getElementById("btn_type");
		btn.addEventListener('tap', function(event) {
			picker.show(function(items) {
				var ttt = items[0]["text"];
				btn_type.innerText = ttt;
			});
		}, false);

		function submit() {
			var des = jQuery("text").val();
			if(ttt.length===0||des.length===0||file_url.length===0){
				mui.toast("请填写完整信息");
				return ;
			}
			var obj = {
				'type': ttt,
				'description': des,
				'img': getBase64(file_url),
			}
			mui.ajax({
				url: '', 
				type: "post",
				async: false,
				data: obj,
				dataType: "json",
				contentType: "application/x-www-form-urlencoded; charset=utf-8",
				jsonp: "jsoncallback",
				success: function(data) {
					if (data['suc'])
						mui.toast("提交成功");
					else
						mui.toast("提交失败");
				},
				error: function() {
					mui.toast("网络开小差了");
				}
			});
		}
	</script>
</html>
